<template>
  <view class="page-container">
    <scroll-view scroll-y>
      <view class="binding-container">
        <view class="materials-section">
          <wd-radio-group
            v-model="isProduct"
            shape="button"
            @change="handleRadioChange"
            style="display: flex; justify-content: space-around"
          >
            <wd-radio :value="2">原材料</wd-radio>
            <wd-radio :value="1">产品</wd-radio>
          </wd-radio-group>
        </view>

        <view class="materials-section">
          <wd-picker
            :columns="materialsData"
            :label="isProduct == 2 ? '原材料' : '产品'"
            v-model="selectedMaterial"
            type="radio"
            filterable
            clearable
            required
          />
        </view>

        <view>
          <wd-cell-group>
            <wd-input v-model="currentWeight" type="number" label="重量" required />
          </wd-cell-group>
        </view>

        <!-- 筐码输入 -->
        <view class="basket-code-section">
          <wd-cell-group>
            <wd-input v-model="basketCode" label="筐码" placeholder="请输入或扫描筐码" required>
              <!-- <template #suffix>
          <wd-button type="primary" @tap="bindBasketCode" :round="false" size="small">
            绑定筐码
          </wd-button>
        </template> -->
            </wd-input>
          </wd-cell-group>
        </view>

        <!-- 备注 -->
        <!-- <view class="remark-section">
    <wd-textarea v-model="remark" label="备注" placeholder="请输入备注信息" />
  </view> -->
      </view>
    </scroll-view>
    <!-- 提交按钮 -->
    <view class="bottom-buttons">
      <wd-row>
        <wd-col :span="24">
          <wd-button type="primary" block @tap="submitData" :round="false">绑定成功</wd-button>
        </wd-col>
      </wd-row>
    </view>
    <scanCode @scanSuccess="getBasketCode"></scanCode>
  </view>
</template>

<script lang="ts" setup>
import scanCode from '@/components/scanCode/scanCode.vue'
import goodsReceiptApi, { ScaleCode, WeightRecord } from '@/api/goodsReceipt'
import { ref, reactive } from 'vue'
import { useMessage, useToast } from 'wot-design-uni'
import { ScanPatternType } from '@/api/scanCode'
import ProductApi from '@/api/product'

const toast = useToast()

const queryCode = ref('')

//是否是产品
const isProduct = ref(1)

//获取原材料或产品
const handleRadioChange = (val) => {
  console.log(val)

  getMaterialsList(val.value)
}

// 新增的响应式数据

const materialsData = ref([])
const selectedMaterial = ref('')

const currentWeight = ref('')

const basketCode = ref('')

// 获取原材料列表
const getMaterialsList = (type: number) => {
  // TODO: 调用获取原材料列表接口
  ProductApi.getProductList(type.toString()).then((res: any) => {
    console.log(res.data.list)

    materialsData.value = res.data.list.map((item) => {
      return {
        label: item.productName,
        value: item.code,
      }
    })
  })
}

// 提交数据
const submitData = () => {
  console.log(Number(currentWeight.value), basketCode.value, selectedMaterial.value)

  // TODO: 实现筐码绑定逻辑
  if (Number(currentWeight.value) <= 0 || !basketCode.value || !selectedMaterial.value) {
    return toast.error('请完善信息后再进行提交操作')
  }
  goodsReceiptApi
    .bindBasket({
      parentCode: basketCode.value,
      productCode: selectedMaterial.value,
      qty: Number(currentWeight.value),
      sourceCategory: 3,
      sourceCode: queryCode.value,
    })
    .then((res: any) => {
      toast.success('绑定成功')
      // 清空页面数据

      uni.navigateBack()
    })
}

const getBasketCode = (code: string) => {
  // 可能扫描标签码，可能扫描筐码。扫描标签待出当前信息，扫描筐码给筐码赋值
  console.log(code)
  if (ScanPatternType.BASKET_CODE.test(code)) {
    // 扫描的是筐码
    basketCode.value = code
  } else if (ScanPatternType.BASKET_CODE_TIMESTAMP.test(code)) {
    // 扫描的是标签码，获取入库单详情
    const [basket, productCode, productName, qty, unit] = code.split('-')
    selectedMaterial.value = productName
    currentWeight.value = qty
  } else {
    toast.error('请扫描标签码或筐码！')
  }
}

onLoad((option) => {
  queryCode.value = option?.inStockCode || '' //入库单
  basketCode.value = option?.basketCode || '' //筐码

  getMaterialsList(isProduct.value)
})
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
}
.binding-container {
  padding: 24rpx;
  margin-bottom: 120rpx;
}

.search-section,
.supplier-section,
.materials-section,
.scale-section,
.weight-section,
.weight-records,
.basket-code-section {
  margin-bottom: 30rpx;
}

// 统一卡片样式
:deep(.wd-cell-group),
:deep(.wd-picker) {
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

// 称重区域样式
.weight-section {
  display: flex;
  align-items: center;

  :deep(.wd-input.is-cell) {
    padding: 24rpx 32rpx;

    .wd-input__label {
      font-weight: 500;
      color: #303133;
    }

    .wd-input__suffix {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;
      align-items: center;

      .wd-button {
        min-width: 140rpx;
        height: 70rpx;
        font-size: 28rpx;
      }
    }
  }
}

// 确认按钮样式增强
.ml-1 {
  margin-left: 16rpx;
}

// 称重次数样式
.weight-count {
  margin-top: 8rpx;
  margin-left: auto;
  font-size: 24rpx;
  color: #909399;
}

.weight-card,
.record-card {
  padding: 20rpx;

  margin-bottom: 20rpx;
  font-size: 28rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  .value {
    font-size: 24rpx;
    color: #909399;
  }
}
.inspection {
  flex-shrink: 0;
  padding: 30rpx;
  margin-top: 20rpx;
  background-color: #ffffff;
  .stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    .stat-item {
      text-align: center;
      .stat-label {
        font-size: 14px;
        color: #666666;
      }
      .stat-value {
        display: block;
        margin-top: 10rpx;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
      }
      .editable-weight {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        .weight-input {
          width: 100rpx;
          height: 50rpx;
          padding: 0 10rpx;
          font-size: 16px;
          font-weight: bold;
          color: #333333;
          text-align: center;
          border: 1px solid #dddddd;
          border-radius: 6rpx;
        }
        .weight-unit {
          margin-left: 10rpx;
          font-size: 14px;
          color: #666666;
        }
      }
    }
  }
  .progress-bar {
    margin-bottom: 30rpx;
    .progress-text {
      margin-bottom: 10rpx;
      font-size: 14px;
      color: #666666;
    }
    .progress-track {
      height: 20rpx;
      overflow: hidden;
      background-color: #f5f5f5;
      border-radius: 10rpx;
      .progress-fill {
        height: 100%;
        background-color: #3e7bfa;
        transition: width 0.3s ease;
      }
    }
  }
}

.weight-display {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20rpx;
  .weight-text {
    display: flex;
    align-items: center;
    justify-content: center;
    .weight-value {
      font-size: 48rpx;
      font-weight: bold;
      color: #333333;
    }
  }
  .weight-actions {
    display: flex;
    justify-content: space-around;

    button {
      margin: 0 10rpx;
    }
  }
}
.weight-records {
  width: 100%;

  .record-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 30rpx;

    background-color: #ffffff;
    border-radius: 10rpx;
    box-shadow: inset 0 0 10rpx rgba(0, 0, 0, 0.1);
    .record-time {
      font-size: 14px;
      color: #666666;
    }
    .record-weight {
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }
  }
  .delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 100%;
  }
}
// 筐码输入区域
.basket-code-section {
  :deep(.wd-input.is-cell) {
    background-color: #fff;
    border-radius: 12rpx;

    .wd-input__inner {
      border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
    }
  }
}

// 底部按钮区域
.bottom-buttons {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  padding: 24rpx 32rpx;
  background-color: #fff;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);

  :deep(.wd-button) {
    height: 90rpx;
    font-size: 32rpx;
    font-weight: 500;
    letter-spacing: 2rpx;
    border-radius: 8rpx;

    // 按钮按压效果
    transition: all 0.2s;
    &:active {
      opacity: 0.9;
      transform: scale(0.98);
    }
  }
}
</style>
